import React, { ReactElement } from "react";
import { ITodo } from "../typings";
import TdItem from "./Item";
interface IProps {
  todoList: ITodo[];
  toggledTodo: (id: number) => void;
  removeTodo: (id: number) => void;
}
const TdList: React.FC<IProps> = ({
  todoList,
  toggledTodo,
  removeTodo,
}): ReactElement => {
  //   console.log(List);
  return (
    <div className="td-list">
      {todoList &&
        todoList.map((item: ITodo) => {
          return (
            <TdItem
              todo={item}
              toggledTodo={toggledTodo}
              removeTodo={removeTodo}
              key={item.id}
            />
          );
        })}
    </div>
  );
};
export default TdList;
